<template>
  <!-- 登录用户：{{userinfo.username}} -->
  <el-row :gutter="20">
    <template v-if="panels.length == 0">
      <el-col :span="6" v-for="i in 4" :key="i">
        <el-skeleton style="width: 100%" animated loading>
          <template #template>
            <el-card shadow="hover" class="border-0">
              <template #header>
                <div class="flex justify-between">
                  <el-skeleton-item variant="text" style="width: 50%" />
                  <el-skeleton-item variant="text" style="width: 20%" />
                </div>
              </template>
              <el-skeleton-item variant="h3" style="width: 70%" />
              <el-divider/>
              <div class="flex justify-between text-sm text-gray-500">
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 20%" />
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
    </template>
    <el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
      <el-card shadow="hover" class="border-0">
        <template #header>
          <div class="flex justify-between">
            <span class="text-sm">{{ item.title }}</span>
            <el-tag :type="item.unitColor" effect="plain" >
              {{ item.unit }}
            </el-tag>
          </div>
        </template>
        <span class="text-3xl font-bold text-gray-500">
          <!-- {{ item.value }} -->
          <CountTo :value="item.value"/>
        </span>
        <el-divider/>
        <div class="flex justify-between text-sm text-gray-500">
          <span>{{ item.subTitle }}</span>
          <span>{{ item.subValue }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <indexNav/>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
      <indexChart/>
    </el-col>
    <el-col :span="12" :offset="0"></el-col>
  </el-row>
  


</template>

<script lang='ts' setup> 
import { ref, reactive } from 'vue'
import { defineStore } from 'pinia'   //pinia
import { storeData } from '@/store'  //pinia
import { useRoute } from 'vue-router'  //路由
import { getstatistics1, getstatistics3 } from '@/services/index' //接口 
import CountTo from '@/components/CountTo.vue'
import indexNav from '@/components/indexNav.vue'
import indexChart from '@/components/indexChart.vue'

// route的调用
const route = useRoute()
// pinia的调用
const counter = storeData()
// 获取用户信息
const userinfo = counter.userinfo


const panels = ref([])

getstatistics1().then(res => {
  // console.log(res)
  // = res.data.data.panels
  panels.value = res.data.data.panels
  console.log(panels.value)
})


</script>

<style scoped>

</style>
